<template>
    <div class=''>
      <h2>商品列表</h2>
      <GoodsList
        v-for="item in list"
        :key="item.id"
        :id="item.id"
        :pname="item.pname"
        :price="item.price"
        :info="item.info"
        @kanyidao="changePrice"
        ></GoodsList>
    </div>
</template>


<script>
import GoodsList from '@/components/GoodsList.vue'
export default {
    name:'app',
    components: {
        GoodsList
    },
    data() {
        return {
          list: [
          { id: 101, pname: '超级无敌棒棒糖', price: 15, info: '好吃，再来一根' },
          { id: 171, pname: '超级解渴水果茶', price: 80, info: '好甜，真好喝' },
          { id: 191, pname: '超级好吃大鸡腿', price: 60, info: '可口，下饭~' }
          ]
        };
    },
    computed: {},
    watch: {},
    methods: {
      changePrice(val, id) {
        // console.log(val, id);
        let res = this.list.find(item => item.id == id)
        if (res.price <= 5) {
          alert("不能在砍了，再砍就赔钱了");
          return; // 终止函数继续执行
        }
        res.price = res.price -val

      }
    },
}
</script>


<style scoped>

</style>